"use client";
import { useQuery } from "@tanstack/react-query";
import { Download, FileText } from "lucide-react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useState } from "react";
import { StatusBadge } from "../../page";
import { LinesChart } from "@/components/charts";
import { BenchmarkTable, EquityVsBenchmarks, MetricsGrid, Provenance, RejectedOrders, RollingSharpe, SensitivityHeatmap, ShuffledTrades, StressTable, TradeLedger, Underwater, WalkForward } from "@/components/run-views";
import { Badge, Card, Empty, ErrorBox, PageHeader, Spinner } from "@/components/ui";
import { api } from "@/lib/api";
import { fmtTs } from "@/lib/format";
import type { Run, StrategyMeta } from "@/lib/types";

export default function RunPage() {
  const { id } = useParams<{ id: string }>();
  const run = useQuery({ queryKey: ["run", id], queryFn: () => api<Run>(`/api/backtests/${id}`), refetchInterval: (q) => (q.state.data && (q.state.data.status === "done" || q.state.data.status === "failed") ? false : 1_500) });
  const strategies = useQuery({ queryKey: ["strategies"], queryFn: () => api<{ items: StrategyMeta[] }>("/api/strategies") });
  const [page, setPage] = useState(0);
  if (run.isLoading) return <Spinner label="Loading run…" />;
  if (run.error) return <ErrorBox error={run.error} />;
  const r = run.data!;
  const meta = strategies.data?.items.find((s) => s.name === r.strategy);
  const a = r.artifacts;
  const m = r.metrics;
  return (
    <>
      <PageHeader
        title={`${meta?.label ?? r.strategy} · ${r.symbol} · ${r.interval_min}m`}
        subtitle={<span className="flex flex-wrap items-center gap-2"><StatusBadge status={r.status} />{meta?.experimental && <Badge tone="warn">experimental — not validated for live use</Badge>}{r.label && <span className="text-fg-muted">{r.label}</span>}{r.start_ts && <span className="num text-fg-dim">{fmtTs(r.start_ts)} → {fmtTs(r.end_ts)}</span>}</span>}
        actions={<>
          <Link href={`/reports/${r.id}`} className="inline-flex h-8 items-center gap-1 rounded-md border border-line-strong px-2.5 text-xs hover:bg-bg-sub"><FileText className="h-3.5 w-3.5" /> Report</Link>
          <a href={`/api/backtests/${r.id}`} className="inline-flex h-8 items-center gap-1 rounded-md border border-line-strong px-2.5 text-xs hover:bg-bg-sub" download={`backtest-${r.id}.json`}><Download className="h-3.5 w-3.5" /> JSON</a>
          <a href={`/api/backtests/${r.id}/trades.csv`} className="inline-flex h-8 items-center gap-1 rounded-md border border-line-strong px-2.5 text-xs hover:bg-bg-sub" download><Download className="h-3.5 w-3.5" /> Trades CSV</a>
        </>}
      />
      {r.status === "failed" && <ErrorBox error={r.error ?? "run failed"} />}
      {(r.status === "queued" || r.status === "running") && <Spinner label={`Backtest ${r.status}… (benchmarks, bootstrap and stress scenarios run in the same job)`} />}
      {r.status === "done" && a && m && (
        <div className="flex flex-col gap-4">
          <Card title="Performance (in-sample window)" subtitle="Net of fees, spread, slippage and impact. Sharpe shows a 95% block-bootstrap interval; the deflated Sharpe is the probability the Sharpe exceeds what the best of N random trials would produce."><MetricsGrid m={m} /></Card>
          <div className="grid gap-4 xl:grid-cols-3">
            <Card title="Equity vs benchmarks" className="xl:col-span-2"><EquityVsBenchmarks a={a} label={r.strategy} /></Card>
            <Card title="Benchmarks" subtitle="Same window, same cost model."><BenchmarkTable a={a} m={m} /></Card>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <Card title="Underwater (drawdown)"><Underwater a={a} /></Card>
            <Card title="Rolling Sharpe"><RollingSharpe a={a} /></Card>
          </div>
          {a.holdout ? (
            <Card title="Out-of-sample holdout" subtitle={`Final ${Math.round(Number(r.provenance?.holdout_frac ?? 0) * 100)}% of the data, never used for selection. Starts ${fmtTs(a.holdout.start_ts)}.`}>
              <MetricsGrid m={a.holdout.metrics} compact />
              <div className="mt-3"><LinesChart series={[{ id: "h", label: "holdout equity", color: "#22c55e", points: a.holdout.equity.map((p) => ({ ts: p.ts, value: p.equity })) }]} height={200} /></div>
            </Card>
          ) : <Card title="Out-of-sample holdout"><Empty title="No holdout window">Set a holdout fraction &gt; 0 in the Strategy Lab to reserve a final test slice.</Empty></Card>}
          <Card title="Walk-forward folds"><WalkForward wf={a.walk_forward} /></Card>
          <div className="grid gap-4 md:grid-cols-2">
            <Card title="Parameter sensitivity"><SensitivityHeatmap s={a.sensitivity} /></Card>
            <Card title="Stress scenarios" subtitle="Re-runs with adverse cost assumptions and a simulated exchange outage gap."><StressTable stress={a.stress} base={m} /></Card>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <Card title="Shuffled-trades Monte-Carlo" subtitle="Drawdown distribution when round-trip P&Ls are reordered."><ShuffledTrades s={a.shuffled_trades} /></Card>
            <Card title="Rejected orders" subtitle="Blocked by the risk gateway during simulation."><RejectedOrders rejected={a.rejected} /></Card>
          </div>
          <Card title={`Trade ledger (${a.trades.length}${a.trades.length >= 2000 ? ", last 2000 shown" : ""})`}><TradeLedger trades={a.trades} page={page} setPage={setPage} /></Card>
          <Card title="Provenance" subtitle="Everything needed to reproduce this run."><Provenance run={r} /></Card>
          {meta && (
            <Card title="Strategy notes">
              <p className="text-xs text-fg-muted">{meta.hypothesis}</p>
              {meta.failure_modes.length > 0 && <p className="mt-2 text-xs"><span className="text-fg-dim">Known failure modes:</span> {meta.failure_modes.join(" · ")}</p>}
              {meta.references.length > 0 && <p className="mt-1 text-xs"><span className="text-fg-dim">References:</span> {meta.references.join("; ")}</p>}
            </Card>
          )}
        </div>
      )}
    </>
  );
}